import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// 创建人： Created by zhaolong
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
///
///代码清单 5-27 一个轮播图的实现
///lib/base/banner.dart
class BannerWidget extends StatefulWidget {
  final List<Widget> bannerList;
  final bool autoLoop;
  const BannerWidget({
    Key? key,
    required this.bannerList,
    this.autoLoop = true,
  }) : super(key: key);

  @override
  _BannerWidgetState createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  //轮播图 PageView 使用的控制器
  late PageController _pageController;

  //定时器自动轮播
  Timer? _timer;

  //当前显示的索引
  int _currentIndex = 500;

  @override
  void initState() {
    super.initState();
    //初始化控制器
    _pageController = PageController(initialPage: _currentIndex);
    //自动轮播 开启定时器
    if (widget.autoLoop) {
      Future.delayed(const Duration(seconds: 1), () {
        startTimer();
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    if (_timer != null) {
      //停止计时
      _timer!.cancel();
    }
  }

  void startTimer() {
    //间隔两秒时间
    _timer = Timer.periodic(const Duration(milliseconds: 2000), (value) {
      print("定时器");
      _currentIndex++;
      //触发轮播切换
      // _pageController.animateToPage(_currentIndex%10000,
      //     duration: Duration(milliseconds: 200), curve: Curves.ease);
      // //刷新
      // setState(() {});
    });
  }

  //使用层叠布局将图片与自定义的指示器组装在一起
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      width: double.infinity,
      child: Stack(
        children: [
          //第一部分 轮播图片
          buildBannerWidget(),
          //第二部分 指示器
          buildTipsWidget(),
        ],
      ),
    );
  }

  //第一部分的实现 PageView来装载图片
  buildBannerWidget() {
    //懒加载方式构建
    return PageView.builder(
      //构建每一个子Item的布局
      itemBuilder: (BuildContext context, int index) {
        int postion = index % widget.bannerList.length;
        return widget.bannerList[postion];
      },
      //控制器
      controller: _pageController,
      //轮播个数 无限轮播 ??
      itemCount: widget.bannerList.length * 10000,
      //PageView滑动时回调
      onPageChanged: (int index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );
  }

  //第二部分的实现 指示器
  Widget buildTipsWidget() {
    int total = widget.bannerList.length;
    return Positioned(
      bottom: 20,
      right: 20,
      child: Container(
        //内边距
        padding: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
        //圆角边框
        decoration: BoxDecoration(
            color: Colors.white, //背景
            //边框圆角
            borderRadius: BorderRadius.all(Radius.circular(10))),
        child: Text("${_currentIndex % total + 1}/${total}"),
      ),
    );
  }
}
